<template>
	<view>
		<cu-custom bgColor="#fff" :isBack="true" textColor="#000000">
			<block slot="backText">返回</block>
			<block slot="content">报名信息反馈</block>
		</cu-custom>
	
		<view style="background-color:#FFFFFF;padding-bottom: 10rpx;padding-top: 20rpx;">
			<uni-list-item title="岗位">
				<view class="flex align-center" slot="right">
					<span class="uni-input text-right" style="color:#959595">{{zhaopindataGangwei}}</span>
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<uni-list-item title="姓名">
				<view class="flex align-center" slot="right">
					<input class="uni-input text-right" placeholder="请输入姓名" placeholder-style="color:#3694EF" v-model="xsjyBackinfo.backinfoStuname"/>
					<!-- <text class="iconfont icon-write ml-2"></text> -->
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<uni-list-item title="手机号">
				<view class="flex align-center" slot="right">
					<input class="uni-input text-right" placeholder="请输入手机号" placeholder-style="color:#3694EF" v-model="xsjyBackinfo.backinfoPhonenumber"/>
					<!-- <text class="iconfont icon-write ml-2"></text> -->
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<uni-list-item title="区域" @click="showCityPicker">
				<view class="flex align-center" slot="right">
					<!-- <input class="uni-input text-right" placeholder="请选择区域" placeholder-style="color:#3694EF" v-model="xsjyBackinfo.backinfoHujixian"/> -->
					<text class="text-right" style="color:#3694EF" v-if="!xsjyBackinfo.backinfoHujixian">请选择区域</text>
					<text style="color:#959595">{{xsjyBackinfo.backinfoHujixian}}</text>
					<text class="iconfont icon-jinrujiantou ml-2"></text>
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<uni-list-item title="性别" @click="changeSex">
				<view class="flex align-center" slot="right">
					<text style="color:#959595">{{sexText}}</text>
					<text class="iconfont icon-jinrujiantou ml-2"></text>
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<uni-list-item title="年龄">
				<view class="flex align-center" slot="right">
					<input class="uni-input text-right" v-model="xsjyBackinfo.backinfoAge"/>
					<!-- <text class="iconfont icon-write ml-2"></text> -->
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<uni-list-item title="民族">
				<view class="flex align-center" slot="right">
					<picker @change="changeMinzu" :value="index" :range="minzuList" range-key="name">
						<text style="color:#959595">{{ minzuList[backinfoMinzu].name }}</text>
						<text class="iconfont icon-jinrujiantou ml-2"></text>
					</picker>
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<uni-list-item title="身份证号">
				<view class="flex align-center" slot="right">
					<input class="uni-input text-right" placeholder="请输入身份证号" placeholder-style="color:#3694EF" v-model="xsjyBackinfo.backinfoSfzNumber"/>
					<!-- <text class="iconfont icon-jinrujiantou ml-2"></text> -->
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<uni-list-item :showArrow="false">
				<view class="flex  flex-column">
					<text>备注信息</text>
					<!-- xsjyBackinfo.backinfoFankuiBeizhu -->
					<textarea
						class="yijian-txt"
						maxlength="250"
						@input="onInput"
						v-model="xsjyBackinfo.backinfoFankuiBeizhu" 
						placeholder="请输入您的反馈内容(最多250字)" 
						placeholder-style="padding-top: 10rpx; font-size: 26rpx; color:#3694EF;margin-top: 45rpx;" 
						style="background-color: #f7fbff;padding-top: 10rpx;padding-left:5rpx;width: 100%; border: none;"></textarea>
				<view style="position:absolute;color:#3694EF;bottom:18rpx;right:35rpx;">{{ inputLength }} / 250</view>
				</view>
			</uni-list-item>
			<view class="split_line" style="width: 94%;margin-left:27rpx;"></view>
			<view class="py-2 px-2" style="margin-bottom: 60rpx;margin-top: 20rpx;">
				<button 
					class="text-white" 
					style="border-radius: 20rpx; border: 0;background-color: #3694EF;width: 80%;" 
					type="primary"
					@click="baomingSubmit"
					>
					立即报名
				</button>
				
			</view>
			    <!-- 弹框 -->
			   <view v-show="showModal" class="modal">
				 <!-- <image src="../../../static/style-two/tan.png" style="width:66%;height: 44%;"></image>
				  <view style="position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;top:570rpx;line-height:74rpx;width:33%;box-sizing:border-box;">
					  <text style="color:#3694EF">报名成功</text>
					  <text>请等候消息</text>
					  <button @click="closeModal" style="background-color: #3694EF;color:#fff;width: 100%;margin-top: 24rpx;border-radius: 15px;">好的</button>
				  </view> -->
				 
				 <kevy-mask :show="showModal" @click="closeModal" :maskClose="true" :z-index="10">
				 			<!-- <view v-if="showSignBox" class="t-overlay" @mousemove.stop @click="closeSign"> -->
				 	<view class="t-o-wrap">
				 		<image class="t-sign-bg" src="../../static/news/tan.png"></image>
				 		<view class="t-g-jf" style="color:#3694EF">报名成功</view>
				 		<view class="t-g-desc">请等候消息</view>
				 		<view class="close-btn" @click="closeModal">好的</view>
				 	</view>
				 </kevy-mask>
			      <!-- <view class="modal-content"> -->
			        <!-- 弹框内容 -->
			        <!-- 关闭按钮 -->
			        <!-- <view class="modal-close" @click="closeModal"> -->
			          <!-- <button @click="closeModal" style="background-color: #3694EF;color:#fff;border-radius: 20rpx;">好的</button> -->
			        <!-- </view> -->
			      <!-- </view> -->
			    </view>
			
			<mpvue-city-picker :themeColor="themeColor" ref="mpvueCityPicker" :pickerValueDefault="cityPickerValueDefault"
			 @onConfirm="onConfirm"></mpvue-city-picker>
		</view>
	</view>
</template>

<script>
	import uniListItem from '@/components/uni-ui/uni-list-item/uni-list-item.vue';
	import mpvueCityPicker from '@/components/uni-ui/mpvue-citypicker/mpvueCityPicker.vue';
	import kevyMask from './kevy-mask.vue';
	
	import minzuData from './minzudata.js';
	const sexArray = ['男', '女', '保密'];
	const app = getApp();
	export default {
		components:{
			uniListItem,
			mpvueCityPicker
		},
		data() {
			return {
				inputLength:0,
				showModal: false,
				CustomBar: this.CustomBar,
				StatusBar: this.StatusBar,
				theme: app.globalData.theme.backgroundColor, //全局颜色变量
				
				minzuList:minzuData,
				themeColor: '#007AFF',  // 区域主题
				cityPickerValueDefault: [28,0,0], //区域默认选项
				zhaopindataGangwei:"",
				backinfoMinzu:0,
				xsjyBackinfo:{
					backinfoHujixian:'',
					backinfoSex:2,
					backinfoMinzu:"",
				},
			}
		},
		computed:{
			sexText(){
				return sexArray[this.xsjyBackinfo.backinfoSex]
			},
		},
		onLoad(option) {
			this.xsjyBackinfo.backinfoZhaopindataId = option.zhaopindataId;
			this.zhaopindataGangwei = option.zhaopindataGangwei;
	        this.xsjyBackinfo.backinfoMinzu = this.minzuList[this.backinfoMinzu].name;
		},
		// 监听返回
		onBackPress() {
			if(this.$refs.mpvueCityPicker.showPicker){
				this.$refs.mpvueCityPicker.pickerCancel();
				return true;
			}
		},
		// 监听页面卸载
		onUnload() {
			if(this.$refs.mpvueCityPicker.showPicker){
				this.$refs.mpvueCityPicker.pickerCancel();
			}
		},
		methods: {
			onInput(e) {
			      this.inputLength = e.target.value.length;
			    },
			closeModal() {
			      this.showModal = false;  // 关闭弹框
				  uni.navigateBack({
				  		delta: 1
				  	});
			    },
			baomingSubmit(){
				var mPattern = /^1[3456789][0-9]\d{8}$/;
				if(this.xsjyBackinfo.backinfoStuname == '' || this.xsjyBackinfo.backinfoStuname == null || this.xsjyBackinfo.backinfoStuname == undefined){
					uni.showToast({
						title: '姓名不能为空！',
						icon: 'none'
					});
				}else if(this.xsjyBackinfo.backinfoPhonenumber == '' || this.xsjyBackinfo.backinfoPhonenumber == null || this.xsjyBackinfo.backinfoPhonenumber == undefined){
					uni.showToast({
						title: '手机号不能为空！',
						icon: 'none'
					});
				}else if (!mPattern.test(this.xsjyBackinfo.backinfoPhonenumber)) {
					uni.showToast({
						title: '手机号格式不正确',
						icon: 'none',
						duration: 2000
					});
				}else if(this.xsjyBackinfo.backinfoSex == 2 || this.xsjyBackinfo.backinfoSex == null || this.xsjyBackinfo.backinfoSex == undefined){
					uni.showToast({
						title: '性别不能为空',
						icon: 'none'
					});
				}else if(this.xsjyBackinfo.backinfoMinzu == '' || this.xsjyBackinfo.backinfoMinzu == null || this.xsjyBackinfo.backinfoMinzu == undefined){
					uni.showToast({
						title: '民族不能为空',
						icon: 'none'
					});
				}else{
					// this.showModal = true;
					uni.request({
						url: app.globalData.serve_job_url + 'addBackinfo',
						method: 'GET',
						data: this.xsjyBackinfo,
						success: res => {
							if(res.data.code == 200){
								// uni.showToast({
								// 	icon: 'none',
								// 	title: '报名成功，请耐心等待消息！'
								// });
								this.showModal = true;
								
									
								
								// setTimeout(function(){
								// 	uni.navigateBack({
								// 		delta: 1
								// 	});
								// }, 1500);
							}else{
								uni.showToast({
									icon: 'none',
									title: '报名失败！请稍后重试...'
								});
							}
						},
						fail: () => {
							uni.showToast({
								icon: 'none',
								title: '网络错误'
							});
						},
					});
				}
			},

			// 显示级联弹框
			showCityPicker(){
				this.$refs.mpvueCityPicker.show();
			},
			// 三级联动的提交事件
			onConfirm(e){
				this.xsjyBackinfo.backinfoHujixian = e.label;
			},
	
			// 修改性别
			changeSex(){
				uni.showActionSheet({
				    itemList: sexArray,
				    success:(res)=> {
				        this.xsjyBackinfo.backinfoSex = res.tapIndex;
				    }
				});
			},
		
			// 民族
			changeMinzu: function(e) {
				this.backinfoMinzu = e.detail.value;
				this.xsjyBackinfo.backinfoMinzu = this.minzuList[this.backinfoMinzu].name;
			},
		}
	}
</script>

<style lang="scss">
	.yijian-txt {
		height: 150rpx;
		width: 500rpx;
		border: #969696 thin solid;
	}
	.modal {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.5);
	  display: flex;
	  justify-content: center;
	  align-items: center;
	  z-index:999;
	}
	
	.modal-content {
	  background-color: #fff;
	  padding: 20px;
	  border-radius: 10px;
	}
	
	.modal-text {
	  margin-bottom: 10px;
	}
	
	.modal-close {
	  text-align: center;
	  cursor: pointer;
	}
	.split_line{
		width: 100%;
		border-bottom: 2rpx solid #e2e2e2;
		margin: 10rpx 0rpx 20rpx 0rpx;
	}
	.t-o-wrap {
			width: 100%;
			position: relative;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
	
			.t-sign-bg {
				width: 550rpx;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;
			}
	
			.t-g-jf {
				position: relative;
				top: -288rpx;
				font-size: 36rpx;
				color: #17ba7a;
			}
	
			.t-g-desc {
				position: relative;
				top: -266rpx;
				font-size: 28rpx;
				color: #000;
				font-weight: 900;
			}
	
			.close-btn {
				position: relative;
				top: -235rpx;
				width: 220rpx;
				height: 60rpx;
				border-radius: 50rpx;
				background: #3694EF;
				text-align: center;
				line-height: 60rpx;
				font-size: 28rpx;
				color: #fff;
			}
	
			.t-rule {
				width: 690rpx;
				background: #fff;
				border-radius: 20rpx;
				padding: 30rpx;
				box-sizing: border-box;
	
				.title {
					text-align: center;
					color: #333;
					font-size: 32rpx;
					margin-top: 10rpx;
				}
	
				.desc {
					text-align: justify;
					margin-top: 20rpx;
					white-space: pre-line;
					font-size: 32rpx;
					color: #666;
					line-height: 50rpx;
				}
			}
	
			.t-close {
				width: 60rpx;
				height: 60rpx;
				margin-top: 40rpx;
				padding: 10rpx;
			}
		}
</style>
